<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>中国天气雷达图</title>
    <link rel="stylesheet" href="https://i.tq121.com.cn/c/core.css">
    <link rel="stylesheet" href="https://i.tq121.com.cn/c/weatherMap/index.css?20200804">
    <link href="http://i.tq121.com.cn/c/weather2017/headStyle_1.css" rel="stylesheet">
    <script type="text/javascript" language="JavaScript" src="https://i.tq121.com.cn/j/core.js"></script>
    <script type="text/javascript" src="https://i.tq121.com.cn/j/jquery-1.8.2.js" ></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=DsbAzjPxk6SdORpAdvTgbtl9s9tR4mgM"></script>
</head>

<body style="overflow:hidden;">
    <div class="mapContent">
        <div id="map" class="map"></div>
        <div class="topBar">
            <div class="searchModel">
                <div class="searchBar"><!--判断当前选中的位置-->
                
                    <input type="text" placeholder="搜索位置" id="searchValue">
                </div>-
            </div>
            <ul class="areaCheck" id="areaCheck">
                <li class="cur" id="radarAll">全国</li>
                <li>东北</li>
                <li>华北</li>
                <li>西北</li>
                <li>西南</li>
                <li>华中</li>
                <li>华东</li>
                <li>华南</li>
            </ul>
            <div class="sigleRadarName dis">        
                <i>当前城市为：</i><span id="sigleRadarName"></span>
            </div>
            <div class="windSiteTime dis"></div>
            <div class="sigleRadarList" style="display:none;">
                <div class="sigleListModel">
                    <div class="sigleList" id="sigleList"></div>
                </div>
            </div>
        </div>
        
        <div class="mapCtrBar"><!--右侧图例-->
            <div class="rainRankBtn dis">排</div>
            <div class="mapStyleBtn">
                <div class="mapStyleList">
                    <div class="topSj"></div>
                    <ul id="mapStyleBtn">
                        <li class="cur" data-map="night" id="mapStyle0">
                            <i class="mapStyleNight"></i>
                            <p>光照</p>
                        </li>
                        <li data-map="tea" id="mapStyle1">
                            <i class="mapStyleTea"></i>
                            <p>深色</p>
                        </li>
                        <li data-map="blue" id="mapStyleWX">
                            <i class="mapStyleBlue"></i>
                            <p>卫星</p>
                        </li>
                    </ul>
                </div>
            </div>
            
        </div>

        <div class="skShowBox dis">
            <span class="cityBar_close"></span>
            <div class="weatherBox">        
                <div class="cityBar">
                    <img src="https://i.tq121.com.cn/i/weatherMap/localBar.png">
                    <span class="cityName"></span>
                </div>
                <div class="weatherModel">
                    <div class="skWeather">
                        <span class="temp"></span>
                    </div>
                    <div class="focsWeather">
                        <p class="hum"></p>
                        <p class="wind"></p>
                    </div>
                    <h1 style="color: red;">
                        <span class="weather"></span>
                    </h1>
                </div>
                <div class="rainModel"><!--判断未来两小时内的天气状况-->
                    <p class="rainMsg"></p>
                    <div class="curve">
                        <ul class="sc_l">
                            <li class="li_1">大雨</li>
                            <li class="li_2">中雨</li>
                            <li class="li_3">小雨</li>
                        </ul>
                        <ul class="sc_b clearfix">
                            <li><i></i></li>
                            <li style="margin-left: 55px">30<i></i></li>
                            <li><i></i></li>
                            <li style="margin-left: 37px">60<i></i></li>
                            <li style="margin-left: 37px">90分钟<i></i></li>
                        </ul>
                        <div class="container_bg">
                            <p class="line1"></p>
                            <p class="line2"></p>
                            <p class="line3"></p>
                            <p class="line4"></p>
                        </div>
                        <div class="container" id="rainLine"></div>
                    </div>
                   
                </div>
            </div>
        </div>

        <div class="loadingOverlay dis"></div>
        
        <div class="radarTips dis"></div>
        <div class="timeBar">
            <div class="changeDateType dis">
                <div class="result" style="color:magenta">实况</div>
                <ul>
                    <li class="cur">实况</li>
                    <li>预报</li>
                    
                </ul>
            </div>
        </div>
        

        <div class="legend dis"><!--图例-->
            <img src="https://i.tq121.com.cn/i/weatherMap/legend_radar.png">
        </div>
        <div class="footer" style="position:absolute;bottom:0;border:0;">  
           
        </div>
    </div>
    
    <script type="text/javascript" src="http://i.tq121.com.cn/j/weather2017/jquery.nicescroll.min.js"></script>
    <script>W.use(['j/weatherMap/interactive']);</script>
</body>
</html>